<template>
	<div class="detail">
		<myHeader></myHeader>
		<div class="content container">
			<div class="content-left">
				<h1>{{ detailData.title }}</h1>
				<div class="top">
					<span class="author">{{ detailData.author }}</span>
					<span>发表于 {{ detailData.created_time }}</span>
					<span>浏览量 {{ detailData.views }}</span>
				</div>
				<div class="box" v-html="detailData.content">
				</div>
				<div class="tags">
					<span v-for="(item, index) in detailData.tags">{{ item }}</span>
				</div>
			</div>
			<div class="content-right">
			</div>
		</div>
	</div>
</template>
<script>
import { articleApi } from '@/plugins/api'
import { dateTime } from '@/plugins/filters'

export default {
	name: 'detail',
	data () {
		return {}
	},
	async asyncData (centent) {
		let id = centent.route.params.id
		var { err, data } = await articleApi.detailData(id)
		data.content = decodeURI(data.content)
		data.created_time = dateTime(data.created_time)
		data.tags = data.keyword.split(',')
		let detailData = data
		return { detailData }
	}
}
</script>
<style scoped lang="less">
.content {
	margin-top: 10px;
	overflow: hidden;

	.content-left {
		width: 790px;
		float: left;
		padding: 15px;
		border-radius: 5px;
		background-color: #fff;

		.top {
			margin: 10px 0;
			color: #666;

			.author {
				color: #409eff;
			}

		}

		.box {
			color: #666;
		}

		.tags {
			margin: 20px -10px;

			span {
				color: #409eff;
				margin: 0 10px;
				padding: 3px 5px;
				display: inline-block;
				border-radius: 3px;
				background-color: rgba(64, 158, 255, .1);
			}
		}
	}

	.content-right {
		width: 410px;
		float: right;
	}
}
</style>
